<!-- eslint-disable no-unused-vars -->
<!-- eslint-disable no-unused-vars -->
<!-- eslint-disable no-unused-vars -->
<template>
  <div>
    <div>
      <!-- 社区 -->
      <h3 style="margin-top: 20vw; padding-bottom: 10vw; margin-left: 5vw">社区</h3>
      <!-- 好友头像 -->
      <van-row justify="space-around">
        <van-col span="4" class="add-friend">
          <div class="icon-jia" @click="show = true">
            <van-icon class-prefix="iconfont" name="extra" />
          </div>
        </van-col>
        <van-col span="4" v-for="(item, index) in imgs" :key="index"
          ><van-image round width="12vw" height="12vw" :src="item"
        /></van-col>
      </van-row>

      <!-- 圆角弹窗（底部） -->
      <van-popup v-model:show="show" position="bottom" :style="{ height: '90%' }" round>
        <h2>朋友列表</h2>

        <!-- 伙伴列表 -->
        <div class="partnerList">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="200"
          >
            <van-cell v-for="user in allusers" :key="user.id">
              <!-- 列表头像 -->
              <van-image round width="12vw" height="12vw" :src="user.avatar" />
              <div>
                <p style="color: black">{{ user.username }}</p>
                <p style="font-size: 10px; color: #75818f">
                  15分钟以前<van-icon name="comment-circle" />
                </p>
              </div>
            </van-cell>
          </van-list>
        </div>
        <!-- 邀请好友 -->
        <van-button type="primary" size="large" color="#6C5DD3" @click="show1 = true"
          >邀请好友</van-button
        >
      </van-popup>
      <van-popup v-model:show="show1" position="bottom" round :style="{ height: '90%' }">
        <img
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          style="background-size: cover"
        />
      </van-popup>

      <!-- 列表 -->
      <div style="margin: 20px">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          style="margin-bottom: 60px"
        >
          <div class="van-cell" v-for="item in list" :key="item.id">
            <!-- 头像和名字 -->
            <div style="display: flex">
              <van-image round width="12vw" height="12vw" :src="item.users[0].avatar" />
              <span style="margin-right: 40vw; font-size: 4vw; margin-left: 1vw">{{
                item.users[0].username
              }}</span>
              <span style="font-size: 8px; color: blue">五分钟前</span>
            </div>
            <!-- 卡片 -->
            <p>加入我们把!!</p>
              <div class="card" v-lazy:background-image="bacimg" style="background-size: cover">
              <van-button>接受挑战</van-button>
            </div>
            <!-- 点赞转发 -->
            <div style="display: flex; justify-content: space-between">
              <span> <van-icon name="like" /><span>100</span></span>
              <span> <van-icon name="chat" style="margin-left: -25vw" /><span>11</span></span>
              <van-icon name="share" />
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <KotoTabbar></KotoTabbar>
  </div>
</template>
<script setup>
import { allChallenges } from '@/api/allChallenges'
import { ref } from 'vue'
const bacimg = ref(
  'http://1.92.157.108:9001/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMTo5MDAwL2Nvb3BlcmF0aW9uLyVFOCU4RiVBMCVFOCU4RiU5Qy5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1NUFI1ME5FSTlKTE84RE82VFozTCUyRjIwMjQxMTIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTEyMlQwMjU4MzZaJlgtQW16LUV4cGlyZXM9NDMyMDAmWC1BbXotU2VjdXJpdHktVG9rZW49ZXlKaGJHY2lPaUpJVXpVeE1pSXNJblI1Y0NJNklrcFhWQ0o5LmV5SmhZMk5sYzNOTFpYa2lPaUpOVUZJMU1FNUZTVGxLVEU4NFJFODJWRm96VENJc0ltVjRjQ0k2TVRjek1qSTROek01TUN3aWNHRnlaVzUwSWpvaWJXbHVhU0o5LmFLY21HdzZGMjYtZUFNSE04S09EZlFjSFVIRkRNYUZDbFVIRjdUaXItM1Bycm5paHkwMjZ1blJHRklBdzRkSmpoVEZKZjZJQjlPWWgwTDlESWZuR0J3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9MDhlOWRiMTJkYWM0OGY3NDVhNDgzNmQzZDI0MTljYWQ1ODk1MGNiYWM4MjA0NTJhY2FjNDM0OWFkMDk4Njg2ZQ',
)
// 朋友图片
const imgs = ref([
  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
])
// 列表
const allusers = ref([])
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  //全部挑战
  allChallenges(2, 2).then((v) => {
    v.data.data.list.forEach((v) => {
      list.value.push(v)
      allusers.value = v.users
    })
    console.log(v)
  })
}

// 点击弹出好友列表
const show = ref(false)
const show1 = ref(false)
</script>

<style scoped lang="css">
/* 图标 */
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont'; /* Project id 4748004 */
  src:
    url('//at.alicdn.com/t/c/font_4748004_6ga831nkk0d.woff2?t=1731741810095') format('woff2'),
    url('//at.alicdn.com/t/c/font_4748004_6ga831nkk0d.woff?t=1731741810095') format('woff'),
    url('//at.alicdn.com/t/c/font_4748004_6ga831nkk0d.ttf?t=1731741810095') format('truetype');
}
.icon-jia {
  width: 12vw;
  height: 12vw;
  margin-left: 10px;
  border-radius: 15px;
  background-color: #f0eefa;
}
.icon-jia:active {
  background-color: #fff;
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 30px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.iconfont-extra::before {
  font-size: 20px;
  position: relative;
  left: 14px;
  top: 6px;
  z-index: 10;
  content: '\e664';
}
.iconfont-shouye::before {
  content: '\e62d';
  position: relative;
  left: 30px;
  bottom: 20px;
}
.van-image {
  position: relative;
  padding: 4px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 25%;
  background-clip: content-box;
  overflow: hidden;
  &:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: -1;
    background-image: linear-gradient(45deg, #932e98, #c2bfc8, #3247ab);
  }
}
/* 列表 */
.van-cell {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  .van-icon {
    font-size: 20px;
  }
  .card {
    width: 100%;
    height: 200px;
    margin-top: 10px;
    padding-bottom: 20px;
    border-radius: 10px;
  }
  .van-button {
    margin: 140px 0 0 25px;
    width: 270px;
    height: 50px;
    border-radius: 15px;
    color: black;
  }
}
.van-popup {
  h2 {
    margin-left: 20px;
  }
  .partnerList {
    height: 75%;
    overflow: hidden;
    position: relative; /* 相对定位 */

    .van-list {
      height: 100%; /* 内容高度 */
      width: 100%; /* 内容宽度 */
      overflow-y: auto;
      .van-cell {
        height: 20%;
        .van-image {
          float: left;
        }
        p {
          width: 80%;
          margin: 0 0 0 55px;
          text-align: left;
          .van-icon {
            float: right;
            font-size: 30px;
            position: relative;
            bottom: 15px;
          }
        }
      }
    }
  }
}
</style>
